<script setup lang="ts">
import { getDataApi } from '@/api/system'
import { useUserStore } from '@/stores'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const loading = ref(false)
const route = useRoute()
const navStore = useUserStore()

const searchInput = ref<any>()
const searchBtnShow = ref(true)
const showSearch = ref(false)
const search = ref<any>()

const searchEnter = (e: any) => {
  if (e.keyCode === 13) {
    showCgPassword()
  }
}

const findTitle = (arr: any, app_name: any, result: any) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].meta.title === app_name) {
      result.push(arr[i])
    }
    if (arr[i].children && arr[i].children.length > 0) {
      findTitle(arr[i].children, app_name, result)
    }
  }
  return result
}

const navInfoList = ref<any>([])
const getNavInfo = async () => {
  loading.value = true
  const params = {
    sqlId: 'system.appSearch',
    sqlParam: JSON.stringify({ cond: search.value })
  }
  await getDataApi(params)
    .then((res: any) => {
      navInfoList.value = res
      navInfoList.value.forEach((item: any) => {
        item.info = findTitle(navStore.userNav, item.app_name, [])
      })
      // console.log(navInfoList.value)

      loading.value = false
    })
    .catch(() => {
      ElMessage({ message: '数据请求失败', type: 'error' })
    })
}

const router = useRouter()
const gotoPath = (path: string) => {
  router.push({
    path: `${path}`
  })
}

const showCgPassword = () => {
  // 这里做了对动画的处理，因为动画是异步的，所以需要延时处理
  if (!search.value) return ElMessage({ message: '搜索内容不能为空', type: 'warning' })
  if (searchBtnShow.value) {
    searchBtnShow.value = !searchBtnShow.value
    getNavInfo()
    setTimeout(() => {
      showSearch.value = !showSearch.value
    }, 200)
  }
}

watch(
  () => route.query.searchValue,
  (newInfo: any) => {
    //要执行的方法
    // console.log(newPath)
    search.value = newInfo
    getNavInfo()

    // console.log(newPath, oldPath)
  },
  { immediate: true, deep: true }
)

onMounted(() => {
  searchInput.value.focus()
})
</script>
<template>
  <transition name="el-fade-in-linear">
    <div v-if="searchBtnShow" class="hidenInfo">
      <div class="SearchInput">
        <h2>报表检索</h2>
        <el-input
          clearable
          ref="searchInput"
          v-model="search"
          style="max-width: 600px"
          placeholder="请输入搜索关键字"
          class="input-with-select"
          @keyup.enter="searchEnter"
        >
          <template #append>
            <el-button :icon="Search" @click="showCgPassword" />
          </template>
        </el-input>
      </div>
    </div>
  </transition>
  <transition name="el-fade-in-linear">
    <div v-if="showSearch" class="showInfo">
      <div class="SearchInput">
        <el-input
          clearable
          v-model="search"
          style="max-width: 600px"
          placeholder="请输入搜索关键字"
          class="input-with-select"
          @keyup.enter="searchEnter"
        >
          <template #append>
            <el-button :icon="Search" @click="getNavInfo" />
          </template>
        </el-input>
      </div>
      <div class="SearchCon">
        <el-scrollbar>
          <el-empty
            v-if="navInfoList.length === 0 && !loading"
            style="height: calc(100vh - 120px)"
            description="无查询结构"
          />
          <div v-else class="searchBox" v-loading="loading">
            <el-card
              v-for="item in navInfoList"
              :key="item.app_id"
              @click="gotoPath(item.info[0].path)"
              class="itemCard"
              shadow="hover"
            >
              <div class="cardTitle">{{ item.app_name }}</div>
              <div class="cardLine">{{ `(${item.app_path})` }}</div>
              <div class="cardContent">
                <p>
                  <span class="lable">需求人：</span><span>{{ item.req_user }}</span>
                </p>
                <p>
                  <span class="lable">需求部门：</span><span>{{ item.req_dept }}</span>
                </p>
                <p>
                  <span class="lable">提出时间：</span><span>{{ item.req_time }}</span>
                </p>
                <p>
                  <span class="lable">应用描述：</span>
                  <span>{{ item.app_description }}</span>
                </p>
                <p>
                  <span class="lable">点击量：</span>
                  <span>{{ item.hits || 0 }}</span>
                </p>
              </div>
            </el-card>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="less">
.hidenInfo {
  position: relative;
  width: 100%;
  height: 100%;
  .SearchInput {
    text-align: center;

    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    h2 {
      font-size: 32px;
      margin-bottom: 20px;
    }
    :deep(.el-input__wrapper) {
      width: 500px;
      height: 40px;
    }
  }
}
.SearchInput {
  margin-top: 8px;
  margin-left: 8px;
  :deep(.el-input__wrapper) {
    width: 500px;
  }

  :deep(.el-input-group__append) {
    width: 60px;
    background-color: var(--cnac-main);
    border: 1px solid var(--cnac-main);
    box-shadow: unset;
    .el-icon {
      color: #fff;
    }
  }
}
.searchBox {
  padding: 0.5rem;
  height: calc(100vh - 100px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 15rem;
  column-gap: 0.625rem;
  row-gap: 0.625rem;
  width: 100%;
  .itemCard {
    cursor: pointer;
    background-color: #fafafa;
    height: 15rem;
    .cardTitle {
      color: #d0021b;
      font-size: 0.875rem;
      max-height: 2.25rem;
      line-height: 1.125rem;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-decoration: underline;
      line-clamp: clamp(0, 2, 2);
    }
    .cardLine {
      font-size: 0.75rem;
      color: #666;
      padding-top: 0.5rem;
    }
    .cardContent {
      p {
        padding-top: 0.5rem;
        line-height: 1.125rem;
        span {
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
